import { Button, Form, Input, Radio, message } from 'antd'
import { KeyOutlined, PhoneOutlined, UserAddOutlined } from '@ant-design/icons'
import { register } from '@/api/user'
import './register.styl'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'

function Register() {
  const navigate = useNavigate()

  const [loading, setLoading] = useState(false)

  const registerSubmit = async(values) => {
    setLoading(true)
    try {
      console.log(values)
      const data = await register(values)
      if(data.code === 0) {
        message.success({
          content: data.msg
        })
        navigate(-1)
      } else {
        message.error({
          content: data.msg
        })
      }
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="P-register">
      <div className="pannel-con">
        <h3>注册</h3>
        <Form onFinish={ registerSubmit } labelCol={{ span: 7 }}>
          <Form.Item label="用户名称" name="username" rules={ [{ required: true, message: "请输入用户名称" }] }>
            <Input placeholder="请输入用户名称" prefix={ <UserAddOutlined /> }></Input>
          </Form.Item>
          <Form.Item label="密码" name="password" rules={ [{ required: true, message: '请输入密码' }]}>
            <Input.Password placeholder="请输入密码" prefix={ <KeyOutlined /> }></Input.Password>
          </Form.Item>
          <Form.Item label="性别" name="sex" rules={ [{ required: true, message: '请选择性别' }] }>
            <Radio.Group>
              <Radio value="m">男</Radio>
              <Radio value="w">女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="手机号" name="mobile" rules={ [{ required: true, message: '请输入手机号' }, { type: 'string', min: 7, max: 11 }] }>
            <Input maxLength={ 11 } placeholder='请输入手机号' prefix={ <PhoneOutlined /> }></Input>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" block={ true } loading={ loading }>提交</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Register
